<template>
  <div class="time">
    <van-nav-bar :border="false">
  <template #right>
    <div style="color: gray;">更多&emsp;></div>
  </template>
  <template #left>
    <div style="font-weight: bold; font-size: 18px;">限时购</div>
  </template>
  <template #title>
    <van-count-down :time="time">
  <template #default="timeData">
    <span class="block">{{ timeData.hours }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.minutes }}</span>
    <span class="colon">:</span>
    <span class="block">{{ timeData.seconds }}</span>
    <span style="color: gray ; font-size: 12px;"> 后 结束</span>
  </template>
</van-count-down>
  </template>

</van-nav-bar>
<div class="artbottom">
            <div class="box2" v-for="(v,index) in timeimg" :key="index">
                <img :src="v" alt="" @click="fun(index)">
                <span class="name">{{ timetext[index] }}</span>
                <h3>￥{{hotmoney[index]}}</h3>
                <p>￥{{ befor[index] }}</p>
            </div>
        </div>

  </div>
</template>

<script>

import Vue from 'vue';
import { NavBar } from 'vant';

Vue.use(NavBar);
import { CountDown } from 'vant';

Vue.use(CountDown);
export default {
    data(){
        return{
            time: 30 * 60 * 60 * 1000,
            timetext:"",
            timeimg:"",
            hotmoney:"",
            befor:""
        }
    },
    methods:{
        fun(index){
            this.$router.push({
                path:'/detail1',
                query:{
                    id:index,
                }
            })
        }
    },
    mounted(){
        this.$http({
        url:"http://localhost:3000/Timelimit",
        method:"get",
    }).then(res=>{
        // console.log(res.data[0].data);
        // console.log(res.data[0].data.befor);
        this.timetext=res.data[0].data.timetext
        this.timeimg=res.data[0].data.timeimg
        this.hotmoney=res.data[0].data.hotmoney
        this.befor=res.data[0].data.befor


        // res.data[0].data.data1.forEach(element => {
        //     console.log(element.img1);
        //     this.myimg.push(element.img1)
            
        // });
       
    })
    }
}
</script>

<style scoped>
.name{
    width: 100%;
    height: 20px;
    overflow: hidden;
    color: gray;
}
   .van-count-down{
    color: red;
    margin-left: 40px;
    width: 100px;
    display: block;
   }
   /deep/.van-nav-bar__title{
    max-width: 80% !important;
    width: 80%;
   }
   .van-nav-bar{
    background-color: #fdeaea;
    border-radius: 10px 10px 0 0 ;
   }
   .time{
    background-color: #fdeaea;
    height: 250px;
    margin: 8px;
    border-radius: 10px !important;
   }


    .artbottom {
  height: 200px;
  display: flex;
  overflow: auto;
}
 .artbottom .box2 {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  flex-shrink: 1;
  background-color: white;
  margin-left: 10px;
  padding: 0 5px 0 5px;
  border-radius: 10px;
}
 .artbottom .box2 img {
    height: 50%;
    width: 200;

}
 .artbottom .box2 h3 {
  color: #f2270c;
  font-weight: bold;
}
 .artbottom .box2 p {
  color: gray;
  text-decoration: line-through;
margin-top: -13px;
}
</style>